React白話文運動27-React Router 01

2022 iThome 鐵人賽

DAY 27

Software Development

React框架白話文運動系列第 27 篇

14th鐵人賽 react白話文運動 react router react-router

hogantech

2022-10-12 16:56:22

7026 瀏覽

分享至

前言

嗨，我是Hogan
目前在經營自己的自媒體 hogan.tech
主要分享一些有關於程式碼、軟體和科技業經驗分享
有興趣的讀者可以進一步關注我，進而獲得更多資訊唷！

未來文章一併更新於此網站 Hogan.B Lab
並且包含多語系繁體中文、英文、日文、簡體中文
觀看分類：React 白話文運動、其他系列

如果想要快速查找其他文章請點選目錄

成立 hogan.tech 的初衷是
希望每個正在這條路上探索的人，
都可以透過 Hogan.tech 嘗試進入程式領域。

前兩篇介紹另一種狀態管理- Zustand

為什麼會想要分享這個技術？
關於狀態管理
Zustand 是什麼？
Zustand用法
Zustand是否能超越Context以及Redux

這一篇則是會介紹另一個必要的套件- React Router

React Router 起源
使用React Router

React Router 起源

大部分的網站都會有分頁的概念，一個網域後面的路徑也會對應伺服器上的檔案資料夾。當使用者點選「上一頁」以及「下一頁」時，也會透過瀏覽器儲存歷史資料。

不過在現在一頁式網頁中，我們在執行「上一頁」以及「下一頁」時，是有可能會發生錯誤的，理由是因為我有的動作都是發生在同一個頁面。除了上述的情況，瀏覽器的歷史紀錄、書籤都有可能因為JavaScript以及React持續地存取資料改變介面內容，導致功能失效。

Routing 就是因此被發展出來的概念，在Client定義紀錄點並且透過JavaScript與瀏覽器位址以及歷史紀錄API互動，來產生預期的行為。

與Angular、Ember這些前端框架不同，React本身其實沒有內建的Router，因此才有工程師開發了React Router 套件提供大家使用，除了帶來便利以外，也成功解決上面提到的問題。

使用React Router

以下用Oreilly 的React學習手冊中的程式碼，修改後作為範例來做講解。

這邊新增了幾個不同的分頁，包含首頁（Home）、關於（About）、活動（Events）、產品（Products）以及聯繫（Contact）。

不過實際上他們是一頁式應用程式SPA（Single Page Application），我們是透過React Router 來讓他有子分頁的概念。

在使用React Router 之前，需要先下載套件，可以透過以下指令安裝

npm install react-router
npm install react-router-dom

要成功安裝以上套件，才能完成接下來的實作

首先先建立一個Page檔案，裡面包含了五個不同的元件

分別為 Home、About、Event、Product、Contact

Page.jsx

import React from 'react'
import { Link } from 'react-router-dom'


export function Home() {
    return (
        <div>
            <h1>Hogan Home</h1>
        </div>
    )
}

export function About() {
    return (
        <div>
            <h1>About</h1>
        </div>
    )
}
export function Events() {
    return (
        <div>
            <h1>Events</h1>
        </div>
    )
}
export function Products() {
    return (
        <div>
            <h1>Products</h1>
        </div>
    )
}
export function Contact() {
    return (
        <div>
            <h1>Contact</h1>
        </div>
    )
}

接下來，在 index.js 裡面除了舊有的 App 元件以外，也使用 react-router-dom 套件中的 BrowserRouter 將App元件包裹著，則裡面元件就可以說使用 Route 的一些功能

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import { BrowserRouter as Router } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Router >
        <App />
    </Router>
);

最後，我們可以在App.jsx 裡面使用 react-router-dom 套件裡面的 Routes以及Route

首先我們可以透過 Routes tag把所有的設定包進去，並且針對想要顯示的元件，使用Route tag 來給予路徑以及對應的元件。

App.jsx

import React from 'react'
import { Routes, Route } from 'react-router-dom'
import {
    Home, About, Events, Products, Contact
} from './Page'


export default function App() {
    return (
        <div>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/about' element={<About />} />
                <Route path='/event' element={<Events />} />
                <Route path='/product' element={<Products />} />
                <Route path='/contact' element={<Contact />} />
            </Routes>
        </div>
    )
}

如果想要透過點擊去切換分頁的話，可以使用react-router-dom 套件中的Link元件

如以下範例，將對應的文字透過Link元件包覆，並且給予指定的子域名，則執行後點擊文字就可以切到對應的分頁

import {Link} from 'react-router-dom'

export function Home() {
    return (
        <div>
            <h1>Hogan Home</h1>
            <nav>
                <Link to="about">About</Link>
                <Link to="event">Events</Link>
                <Link to="product">Products</Link>
                <Link to="contact">Contact</Link>
            </nav>
        </div>
    )
}

以下也截圖我自己執行的結果提供讀者參考